<template>
  <div class="base-curriculum">
    <!--    第一个卡片-->
    <el-card>
      <div class="desc-box">
        <div class="title">课程列表</div>
        <div class="desc">您可以对课程列表进行增删改查操作，在进行查询时，第一步应选择学科，再选择课程！</div>
      </div>

      <div class="use-box">
        <div>
          <el-button class="add-button" type="primary" @click="openDialogComponent(0)">添加课程详情</el-button>
        </div>
        <div class="search-box">
          <div class="current-semester">当前启用学期为 :{{ currentSemesterName }}</div>
          <div>
            <span class="search-name">学科 :</span>
            <el-select v-model="queryInfo.SubjectID" @change="subjectChange">
              <el-option label="-----查询全部-----" :value="0"></el-option>
              <el-option v-for="(item,index) in subjectDataList"
                         :key="index"
                         :label="item.Text"
                         :value="item.Value">
              </el-option>
            </el-select>
          </div>
          <div class="search-input">
            <span class="search-name">课程 :</span>
            <el-select v-model="queryInfo.CurriculumID">
              <el-option label="-----查询全部-----" :value="0"></el-option>
              <el-option v-for="(item,index) in companyCurriculumList"
                         :key="index"
                         :label="item.Text"
                         :value="item.Value">
              </el-option>
            </el-select>
          </div>
          <div>
            <el-button type="primary" class="search-button" @click="getTableList()">查询</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <!--    第二个卡片-->
    <el-card class="second-card">
      <el-table
        ref="table"
        border
        max-height="530px"
        v-loading="loading"
        element-loading-text="拼命加载中......"
        :data="tableData"
        :cell-style="{textAlign:'center'}"
        :header-cell-style="{textAlign:'center'}"
        :header-cell-class-name="setHeaderRowClassName"
      >
        <el-table-column type="index" label="序号" fixed></el-table-column>
        <el-table-column prop="SubjectName" label="学科名称" width="200px"></el-table-column>
        <el-table-column prop="ClassName" label="课程名称" width="200px"></el-table-column>
        <el-table-column prop="Week" label="上课星期" width="110px"></el-table-column>
        <el-table-column prop="TimeInterval" label="上课时段">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.TimeInterval==='上午'" type="primary" effect="plain" size="mini">上午</el-tag>
            <el-tag v-else-if="scope.row.TimeInterval==='下午'" type="success" effect="plain" size="mini">下午</el-tag>
            <el-tag v-else type="warning" effect="plain" size="mini">晚上</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="StartTime" label="开始时间-----结束时间" width="200px">
          <template slot-scope="scope">
            <span>{{ scope.row.StartTime }}-----</span>
            <span>{{ scope.row.EndTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="CampusName" label="校区-教室名称" width="300px">
          <template slot-scope="scope">
            <div class="bind-box">
              <p v-if="scope.row.CampusName===null" class="not-bind">未绑定</p>
              <p v-if="scope.row.CampusName!==null" class="name-size">
                {{ scope.row.CampusName }}----{{ scope.row.RoomName }}</p>
              <el-tag
                size="mini" class="bind-button"
                type="success"
                @click="openBindCampusDialog(scope.row)">绑定+
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Name" label="教师名称" width="200px">
          <template slot-scope="scope">
            <div class="bind-box">
              <p v-if="scope.row.Name===null" class="not-bind">未绑定</p>
              <p v-if="scope.row.Name!==null" class="name-size">{{ scope.row.Name }}</p>
              <el-tag
                size="mini" class="bind-button"
                type="success"
                @click="openBindTeacherDialog(scope.row)">绑定+
              </el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="启停状态" width="110px">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.Status"
              :active-value="1"
              :inactive-value="0"
              @change="statusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="290px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="openDialogComponent(scope.row.ID)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteInfo(scope.row.ID)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <pagination :child-msg="queryInfo" @callFather="callFather"></pagination>

    </el-card>
    <!--  添加和编辑的对话框-->
    <add-and-edit-dialog
      v-if="isShowDialogComponent"
      :title="title"
      :is-show-dialog-component="isShowDialogComponent"
      @handleClose="handleClose"
      :judge-id="judgeId"
    ></add-and-edit-dialog>

    <!--    绑定教师对话框-->
    <bind-teacher-dialog
      v-if="isShowBindTeacherDialog"
      :is-show-bind-teacher-dialog="isShowBindTeacherDialog"
      @handleBindTeacherClose="handleBindTeacherClose"
      :bind-teacher-id="bindTeacherId"
    ></bind-teacher-dialog>

    <!--    绑定教室对话框-->
    <bind-classroom-dialog
      v-if="isShowBindClassroomDialog"
      :is-show-bind-classroom-dialog="isShowBindClassroomDialog"
      @handleBindClassroomClose="handleBindClassroomClose"
      :bind-classroom-id="bindClassroomId">
    </bind-classroom-dialog>


  </div>
</template>

<script>
//引入封装接口的类
import CompanyCurriculumDetails from '../../model/companyCurriculumDetails'
import CompanyCurriculum from '../../model/companyCurriculum'

//引入添加编辑对话框组件
import AddAndEditDialog from './childComps/AddAndEditDialog'
//引入分页的组件
import Pagination from '../../components/base/pagination/Pagination'
//引入绑定教师的组件
import BindTeacherDialog from './childComps/BindTeacherDialog'
//引入绑定校区的组件
import BindClassroomDialog from './childComps/BindClassroomDialog'
import CompanySubject from '../../model/companySubject'
import Semester from '../../model/semester'

export default {
  name: 'CompanyCurriculumDetails',
  components: {
    AddAndEditDialog,
    Pagination,
    BindTeacherDialog,
    BindClassroomDialog
  },
  data () {
    return {
      loading: false,
      //表格数据
      tableData: [],
      //获取列表需要传入的参数
      queryInfo: {
        SubjectID: 0,
        CurriculumID: 0,
        Page: 1,
        Limit: 10,
        total: 0
      },
      //修改课程详情状态
      statusChangeForm: {
        id: '',
        status: ''
      },
      //添加和编辑对话框的title
      title: '',
      //添加和编辑对话框的显示与隐藏
      isShowDialogComponent: false,
      //判断添加和编辑对话框的按钮点击
      judgeId: 0,
      //控制绑定教师的对话框的显示与隐藏
      isShowBindTeacherDialog: false,
      //控制绑定校区对话框的显示与隐藏
      isShowBindClassroomDialog: false,
      //绑定教师的ID
      bindTeacherId: 0,
      //绑定教室的id
      bindClassroomId: 0,
      //当前正在启用的学期的id
      currentSemesterId: '',
      //当前正在启用的学期名称
      currentSemesterName: '',
      //保存获取到的学科数据
      subjectDataList: [],
      //保存课程数据
      companyCurriculumList: [],
    }
  },
  created () {
    this.getTableList()
    this.getSemesterId()
  },
  methods: {
    //分页的回调
    callFather (value) {
      if (value.currentPage) this.queryInfo.Page = value.currentPage
      if (value.pageSize) this.queryInfo.Limit = value.pageSize
      this.getTableList()
    },
    //设置绑定学科的表头样式
    setHeaderRowClassName ({ rowIndex }) {
      if (rowIndex === 0) {
        return 'setHeaderSubjectColumnName'
      }
    },
    //添加和编辑对话框的关闭事件
    handleClose (payload) {
      if (payload === 'submitButton') {
        this.getTableList()
      }
      this.isShowDialogComponent = false
    },
    //绑定教师对话框的关闭事件
    handleBindTeacherClose (payload) {
      if (payload === 'submitButton') {
        this.getTableList()
      }
      this.isShowBindTeacherDialog = false
    },
    //绑定校区对话框的关闭事件
    handleBindClassroomClose (payload) {
      if (!payload) {
        this.getTableList()
      }
      this.isShowBindClassroomDialog = false
    },
    //打开添加、编辑话框
    openDialogComponent (id) {
      this.title = id === 0 ? '添加课程详情' : '编辑课程详情'
      this.judgeId = id === 0 ? 0 : id
      this.isShowDialogComponent = true
    },
    //打开绑定教师对话框
    openBindTeacherDialog (rowInfo) {
      this.bindTeacherId = rowInfo.ID
      this.isShowBindTeacherDialog = true
    },
    //打开绑定校区对话框
    openBindCampusDialog (rowInfo) {
      this.bindClassroomId = rowInfo.ID
      this.isShowBindClassroomDialog = true
    },
    //获取课程详情列表
    async getTableList () {
      try {
        this.loading = true
        const res = await CompanyCurriculumDetails.PageSearch(this.queryInfo)
        console.log(res)
        this.loading = false
        this.tableData = res.ListData
        this.queryInfo.total = res.Total
        this.imageUrl = res.ImageUrl
      } catch (err) {
        this.loading = false
      }
    },
    //获取学期的id
    async getSemesterId () {
      const res = await Semester.GetCurrentSemester()
      this.currentSemesterId = res[0].Value
      this.currentSemesterName = res[0].Text
      await this.getCompanySubjectList()
    },
    //获取学科列表信息
    async getCompanySubjectList () {
      const res = await CompanySubject.PageSearchList({ ID: this.currentSemesterId })
      this.subjectDataList = res
    },
    //获取某学科下的课程ID
    async subjectChange (value) {
      const result = await CompanyCurriculum.PageSearchList({ ID: value })
      this.companyCurriculumList = result
      if (this.companyCurriculumList.length === 0) {
        this.$message.error({
          message: '该学科下未添加课程，暂时无法进行查询',
          offset: 100
        })
      }
    },
    //删除操作
    async deleteInfo (id) {
      const confirmResult = await this.$confirm('此操作将永久删除该课程详情, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除该课程详情的操作')
      } else {
        await CompanyCurriculumDetails.Delete({ ID: id })
        this.$message.success('成功删除该课程详情')
        await this.getTableList()
      }
    },
    //修改启停状态
    async statusChange (rowInfo) {
      this.statusChangeForm.id = rowInfo.ID
      this.statusChangeForm.status = rowInfo.Status
      await CompanyCurriculumDetails.UpdateStatus(this.statusChangeForm)
      this.$message.success('成功修改课程详情的启停状态')
      await this.getTableList()
    },
  }

}
</script>

<style scoped>
@import "../../../src/assets/style/realize/tableStyle.css";
.base-curriculum {
  background-color: #eee;
}
.el-card {
  box-shadow: none;
  margin-top: 10px;
}
.second-card {
  padding-bottom: 80px;
  position: relative;
}
.el-pagination {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.search-name {
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.not-bind {
  color: #d3d3d3;
}
.bind-box {
  display: flex;
  justify-content: space-between;
}
.current-semester {
  line-height: 40px;
  font-size: 15px;
  font-weight: bold;
  color: #DC143C;
  padding: 0 30px;
}
/deep/ .el-tag {
  border-radius: 0;
}
/*给表头一行加背景颜色*/
/deep/ .setHeaderSubjectColumnName {
  background-color: #E6E6FA !important;
  opacity: 0.7 !important;
}
</style>


